import store from '@/store/index'

const { body } = document, WIDTH = 992

export default {
	beforeMount() {
		window.addEventListener('resize', this.$_resizeHandler)
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.$_resizeHandler)
	},
	mounted() {
		const isMobile = this.$_isMobile()
		if (isMobile) {
			store.commit('toggleDevice', 'mobile')
			store.commit('closeSidebar', true)
		}
	},
	methods: {
		$_isMobile() {
			const rect = body.getBoundingClientRect()
			return rect.width - 1 < WIDTH
		},
		$_resizeHandler() {
			if (!document.hidden) {
				const isMobile = this.$_isMobile()
				store.commit('toggleDevice', isMobile ? 'mobile' : 'desktop')
				if (isMobile) {
					store.commit('closeSidebar', true)
				}
			}
		}
	}
}
